<template>
  <view class="rescue-dialog" @click="closed">
    <view class="rescue-dialog-content" @click.stop="">
      <view class="rescue-dialog-content-title"> 救援任务</view>
      <view class="rescue-dialog-content-list">
        <view class="card-content" v-for="(item, index) in list" :key="index">
          <view class="buildding-info">
            <!-- 小区列表 -->
            <view>
              <view class="buildDingList">
                <!-- 左边 -->
                <view class="buildDingList_left">
                  <image src="@/static/images/index/build.svg" mode=""></image>
                  <view class="buildingName" @click="toBuilddingDetail(item)">
                    <view class="nameItem">
                      {{ item.buildingName }}
                      <!-- {{ item.buildingName.substring(0, item.buildingName.length - 3) }} -->
                      <text>{{ item.list.length }}</text>
                    </view>
                    <view class="address">{{ item.buildingAddress }}</view>
                  </view>
                  <!-- 右边 -->
                </view>
                <view class="buildDingList_right" @click.stop="toAddress(item)">
                  <image src="@/static/images/locations.png" mode=""></image>
                  <text style="color: #666">导航</text>
                  <text v-if="item.kmDesc">{{ item.kmDesc }}</text>
                </view>
              </view>

              <view class="showmore">
                <view class="line"></view>
              </view>

              <!-- 电梯列表 -->
              <view class="elevtorList">
                <elevator
                  :showBtn="true"
                  :last="idx == item.list.length - 1"
                  v-for="(e, idx) in item.list"
                  :elevator="{ ...e, index: idx,latitude:item.latitude,longitude:item.longitude }"
                  :key="idx"
                  @update="$emit('update')"
                  @updateElevatorStatus="updateElevatorStatus"
                ></elevator>
              </view>
              <!-- 电梯列表end -->
            </view>
            <!-- 小区列表end -->
          </view>
        </view>
      </view>
    </view>

    <view class="close-btn" @click.stop="closed">
      <uni-icons type="clear" size="32" color="rgba(51,51,51,0.30)"></uni-icons>
    </view>
  </view>
</template>
<script>
import elevator from '@/pages/index/components/elevator.vue';
export default {
	components: { elevator },
	props: {
		list: {
			type: Array,
			default: () => {
				return [];
			},
		},
	},
	data() {
		return {};
	},
	methods: {
		toBuilddingDetail(item) {
			uni.navigateTo({
				url: '/pageModules/projectInfo/detail?id=' + item.buildingId,
			});
		},
		updateElevatorStatus(res) {
			this.$emit('updateElevatorStatus',res);
		},
		getAliasStr(str) {
			if (!str) {
				return '';
			}
			if (str.length > 20) {
				return '(项目别名：' + str.slice(0, 20) + '...)';
			} else {
				return '(项目别名：' + str + ')';
			}
		},
		toAddress(item) {
			const { latitude, longitude, buildingName, aliasStr, buildingAddress } = item;
			const params = {
				latitude: Number(latitude),
				longitude: Number(longitude),
				name: buildingName + this.getAliasStr(aliasStr),
				scale: 18,
				address: buildingAddress,
			};
			uni.openLocation(params);
		},
		closed() {
			this.$emit('closed');
		},
	},
};
</script>

<style lang="scss" scoped>
.rescue-dialog {
  width: 100%;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.17);
  z-index: 301;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.rescue-dialog-content {
  background-color: #fcdede;
  border-radius: 8rpx;
  width: 650rpx;

  margin: 0 auto;
  margin-top: 1vh;
  overflow-x: hidden;
  position: relative;

  &-title {
    height: 77rpx;
    display: flex;
    align-items: center;
    font-size: 32rpx;
    color: #333;
    font-weight: bold;
    justify-content: center;
    text-align: center;
    position: sticky;
    top: 0px;
  }

  &-list {
    width: 100%;
    max-height: 80vh;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .card-content {
    margin: 0 20rpx;
    padding: 0 20rpx;
    background-color: #fff;
    border-radius: 8rpx;
    margin-bottom: 8rpx;
    position: relative;
    border-top: 2rpx solid #eee;

    .buildding-info {
      padding: 28rpx 0;

      .buildDingList {
        position: relative;
        display: flex;
        // padding-bottom: 20rpx;
        align-items: center;

        .buildingName {
          font-weight: bold;
          font-size: 28rpx;
          color: #333;

          text {
            font-size: 24rpx;
            margin-left: 4rpx;
            background: #e9e9e9;
            border-radius: 50%;
            width: 28rpx;
            height: 28rpx;
            font-weight: normal;
            display: inline-block;
            text-align: center;
            line-height: 28rpx;
          }
        }

        .buildDingList_left {
          display: flex;
          flex: 1;

          image {
            margin-right: 10rpx;
          }

          .name {
            font-weight: bold;
            font-size: 28rpx;
            color: #333;
          }

          .address {
            font-size: 24rpx;
            color: #999;
            font-weight: normal;
          }
        }

        .buildDingList_right {
          width: 120rpx;
          // display: flex;
          // align-items: center;
          font-size: 24rpx;
          color: #999;
          text-align: right;

          // justify-content: flex-end;
          image {
            width: 32rpx;
            height: 32rpx;
            vertical-align: middle;
          }

          text:nth-of-type(1) {
            vertical-align: middle;
          }

          text:nth-of-type(2) {
            display: block;
            margin-left: 8rpx;
          }
        }

        image {
          width: 48rpx;
          height: 48rpx;
        }
      }

      .showProject {
        position: absolute;
        bottom: 0;
      }

      .fold {
        // position: absolute;
        width: 40rpx;
        height: 18rpx;
        padding: 0 20rpx;
        background-color: #fff;
        left: calc(50% - 30rpx - 30rpx);
        bottom: -28rpx;
        z-index: 5;
        transition: 0.3s all;
      }
    }

    .plans {
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 35rpx 0;
      border-top: 2rpx solid #eeeeee;

      &-content {
        .progress {
          color: #16bf99;
        }

        .beStart {
          color: #0091ff;
        }

        width: 100%;

        .menberName {
          display: flex;
          align-items: center;

          .menber {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20rpx;
            width: 48rpx;
            height: 48rpx;
            border-radius: 50%;
            background-color: #0091ff;
            color: #fff;
            margin-left: 4rpx;
          }

          :nth-child(2n) {
            // background-color: #00c6c0;
          }

          .finish {
            background: #b9b9b9 !important;
          }
        }

        .top {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .handle {
            display: flex;
            align-items: center;
            padding: 0 20rpx;
          }
        }

        .name {
          font-size: 32rpx;
          font-weight: bold;
          color: #333333;

          .tag {
            font-size: 24rpx;
            padding: 0rpx 9rpx;
            font-weight: normal;
            margin-left: 12rpx;
            border-radius: 4rpx;
            line-height: 32rpx;
            white-space: nowrap;
            margin-bottom: 2rpx;
          }
        }

        .detail {
          width: 530rpx;
          font-size: 26rpx;
          color: #666666;
          padding: 14rpx 0;
          display: flex;

          .label {
            width: 80rpx;
            display: flex;
            align-items: center;
          }

          .telName {
            display: flex;
            flex-wrap: wrap;

            view {
              font-size: 24rpx;
              border: 2rpx solid #cccccc;
              border-radius: 20rpx;
              margin: 0 12rpx;
              padding: 2rpx 8rpx;
              margin-top: 6rpx;
            }
          }

          image {
            width: 32rpx;
            height: 32rpx;
          }
        }

        .detail_bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;

          &_left {
            display: flex;
            font-size: 26rpx;
            align-items: center;

            .status {
              color: #16bf99;
            }

            .error {
              margin-left: 12rpx;
              padding: 4rpx 8rpx;
              font-size: 24rpx;
              color: #e02020;
              background: #ffe3e3;
              border-radius: 4rpx;
            }
          }
        }

        .time {
          font-size: 24rpx;
          font-weight: 400;
          text-align: left;
          color: #999999;
          line-height: 34rpx;
        }
      }
    }
  }

  .showmore {
    width: 100%;
    text-align: center;
    font-size: 24rpx;
    color: #999999;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 30rpx;
    padding-top: 20rpx;

    .line {
      width: 100%;
      height: 2rpx;
      background: #eeeeee;
      position: absolute;
      left: 0;
      top: calc(50% - 15rpx);
    }

    .text {
      background-color: #fff;
      padding: 0 20rpx;
      z-index: 9;
    }
  }

  .red {
    color: #e02020;
    border: 1rpx solid #e02020;
  }

  .green {
    color: #6dd400;
    border: 1rpx solid #6dd400;
  }

  .yellow {
    color: #f7b500;
    border: 1rpx solid #f7b500;
  }

  .org {
    color: #fa6400;
    border: 1rpx solid #fa6400;
  }

  .buildAddress {
    left: 58rpx;
    font-size: 24rpx;
    font-family: PingFangSC, PingFangSC-Regular;
    text-align: left;
    color: #999999;
  }
}

.close-btn {
  width: 66rpx;
  margin: 10rpx auto;
}
</style>
